<template>
  <div>
    <p>axios使用示例</p>
    <button @click="getData">get请求</button>
    <button @click="postData">post请求</button>
    <button @click="allData">并发请求</button>
    <hr />
    <button @click="myGet">封装-get</button>
    <button @click="myPost">封装-post</button>
    <hr>
    <button @click="myGetEs">封装-es7-get</button>
    <button @click="myPostEs">封装-ex7-post</button>
    <hr />
    <p>菜单列表</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <router-link :to="item.url">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// 引入qs,对post请求中的数据进行序列化
import qs from "qs";
// 引入原生axios
import axios from "axios";
// 导入封装的接口
import { getMenuList, editMenu } from "../api";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      // 省略地址时，以页面地址为准
      this.$http
        .get("/menulist")
        .then((res) => {
          this.list = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    postData() {
      // post请求中的数据通过body传给后台，所以需要序列化，也就是转成字符串
      let data = { pid: "rthjk", id: 6789 };
      // 序列化
      let data1 = qs.stringify(data);
      console.log(data1);
      this.$http
        .post("/menuedit", data1)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    req1() {
      return axios.get("/api/menulist");
    },
    req2() {
      return axios.post("/api/menuedit", { id: "5678", pid: "5yjk" });
    },
    // 同时发出多个请求，等待全部返回
    allData() {
      // 通过create创建的实例中，没有all和spread方法，必须使用原生的axios
      axios
        .all([this.req1(), this.req2()])
        // spread 传播，将数组分散放在不同的变量中，方便使用
        .then(
          axios.spread((res1, res2) => {
            console.log(res1);
            console.log(res2);
          })
        );
    },
    // 封装好的get
    myGet() {
      getMenuList()
        .then((res) => {
          console.log(111, res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 封装好的post
    myPost() {
      editMenu({ id: "56yu" })
        .then((res) => {
          console.log(222, res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // ES7风格的get
    async myGetEs() {
      let res = await getMenuList();
      console.log(333, res);
    },
    // ES7风格的post
    async myPostEs() {
      let res = await editMenu({id: 666});
      console.log(444, res);
    }
  },
};
</script>

<style>
</style>